<template>
  <el-col :span="16">
    <el-form-item :label="label" prop="file"
                  :rules="[
                 ]">
      <el-upload ref="file"
                 :action="`${this.$http.BASE_URL}/sys/file/webupload/upload?uploadPath=/jf/jfFileConfig`"
                 :headers="{token: $cookie.get('token')}"
                 :on-preview="(file, fileList) => {$window.location.href = (file.response && file.response.url) || file.url}"
                 :on-change="showVal()"
                 :on-success="(response, file, fileList) => {

                       inputForm.file = fileList.map(item => (item.response && item.response.url) || item.url).join('|')

                    }"
                 :on-remove="(file, fileList) => {
                      $http.post(`/sys/file/webupload/deleteByUrl?url=${(file.response && file.response.url) || file.url}`).then(({data}) => {
                        $message.success(data.msg)
                      })
                      inputForm.file = fileList.map(item => item.url).join('|')
                    }"
                 :before-remove="(file, fileList) => {
                      return $confirm(`确定移除 ${file.name}？`)
                    }"
                 multiple
                 :limit="count"
                 :on-exceed="(files, fileList) =>{
                       $message.warning(`当前限制上传 ${count} 个文件`)
                    }"
                 :file-list="fileArray">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">添加相关附件</div>
      </el-upload>

    </el-form-item>
  </el-col>
</template>

<script>
  export default {
    data () {
      return {
        fileArray: [],
        inputForm: {
          file: ''
        }
      }
    },
    name: 'el-file-dialog',
    props: {
      height: {
        type: Number,
        default: () => { return 0 }
      },
      width: {
        type: Number,
        default: () => { return 0 }
      },
      size: {
        type: Number,
        default: () => { return 100 }
      },
      suffix: {
        type: String,
        default: () => { return '' }
      },
      count: {
        type: Number,
        default: () => { return 99 }
      },
      label: {
        type: String,
        default: () => { return '' }
      },
      title: {
        type: String,
        default: () => { return '' }
      },
      labelName: {
        type: String,
        default: () => { return '' }
      },
      labelValue: {
        type: String,
        default: () => { return '' }
      },
      fileSize: {
        type: String,
        default: () => { return 'default' }
      },
      keyLabel: {
        type: String,
        default: () => { return '' }
      }
    },
    watch: {

    },
    created: async function () {
      console.info(111)
    },
    methods: {
      init (method, obj) {
        this.visible = true
        this.loading = false
        this.$nextTick(() => {
          this.fileLoad()
          this.loading = false
        })
      },
      showVal () {
        var _this = this
        this.$emit('setFileValue', _this.inputForm.file)
        this.$emit('fileList', _this.inputForm.file)
        console.info(_this.inputForm.file)
      },
      fileLoad () {
        console.info(this.keyLabel)
      }
    }
  }
</script>
